<template>
  <div>
    <el-button type="primary" style="float: left;margin: 0px 20px 20px 0px" @click="dialogTableVisible = true">添加</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="添加">
      <el-form ref="row_data" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label="'标题'" prop="title">
          <el-input v-model="row_data.title"/>
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="row_data.name"/>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="row_data.icon"/>
        </el-form-item>
        <el-form-item label="vue路由" prop="path">
          <el-input v-model="row_data.path"/>
        </el-form-item>
        <el-form-item label="重定向地址" prop="redirect">
          <el-input v-model="row_data.redirect"/>
        </el-form-item>
        <el-form-item label="组件" prop="component">
          <el-input v-model="row_data.component"/>
        </el-form-item>
        <el-form-item label="显示根路由">
          <el-switch v-model="row_data.alwaysShow"/>
        </el-form-item>
        <el-form-item label="在侧边栏显示">
          <el-switch v-model="row_data.hidden"/>
        </el-form-item>
        <el-form-item label="主菜单">
          <el-switch v-model="row_data.ismain"/>
        </el-form-item>
        <el-form-item label="缓存">
          <el-switch v-model="row_data.nocache"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('row_data')">立即创建</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { addPage } from '@/api/shop_admin_auth/adminPage'
import store from '@/store'

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  data() {
    return {
      dialogTableVisible: false,
      row_data: {
        alwaysShow: true,
        component: 'Layout'
      }
    }
  },
  methods: {
    submitForm(formName) {
      addPage(store.getters.token, this.row_data).then(res => {
        if (res.data.status) {
          this.$message.success(res.data.msg)
          this.$emit('getLists')
          this.close()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    close() {
      this.dialogTableVisible = false
    }
  }
}
</script>
